<template>
  <div>
    <h1 class="text-red">我是远程加载的页面</h1>
    <div class="cus-margin">
      <el-input
                class="el-input"
                v-model="input"
                placeholder="placeholder"
                @input="changeValue"
                />
  	</div>
    <div class="cus-margin">
      <el-button @click="emitParentFun">调用父组件的方法</el-button>

      <el-button @click="globalConfig.flushed">刷新123</el-button>
  	</div>
  </div>
  <div
      id="main"
      style="height: 500px; width: 500px; display: inline-block"
  ></div>
  <div
      id="kmain"
      style="height: 500px; width: 500px; display: inline-block"
  ></div>
  <div
      id="ymain"
      style="height: 500px; width: 500px; display: inline-block"
  ></div>
</template>

<script setup lang="ts">
import {defineProps, defineEmits, ref, onMounted} from "vue";
import {useCounterStore} from "store";
import {cookie} from "utils";
import echarts from "echarts";
import globalConfig from "globalConfig";

// console.log("echarts", echarts);

// console.log("工具类", cookie);
cookie.copyHandler();

const conter = useCounterStore();
// console.log("我是远程组件的数据" + conter.count);

const props = defineProps(["modelValue"]);
// 更新model绑定的值固定写法: update:modelValue
const emit = defineEmits(["update:modelValue", "childClick"]);

let input = ref<string>("");

onMounted(() => {
  input.value = props.modelValue;
  // window环境指向的是接收方的window环境
  //   console.log(window.testName);

  //   获取DOM元素并且进行初始化;
  var myChart = echarts.init(document.getElementById("main"));
  // 创建图标
  myChart.setOption({
    title: {
      text: "ECharts 入门示例",
    },
    tooltip: {},
    xAxis: {
      data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
    },
    yAxis: {},
    series: [
      {
        name: "销量",
        type: "bar",
        data: [5, 20, 36, 10, 10, 20],
      },
    ],
  });

  var kMyChart = echarts.init(document.getElementById("kmain"));
  kMyChart.setOption({
    xAxis: {
      data: ["2017-10-24", "2017-10-25", "2017-10-26", "2017-10-27"],
    },
    yAxis: {},
    series: [
      {
        type: "candlestick",
        data: [
          [20, 34, 10, 38],
          [40, 35, 30, 50],
          [31, 38, 33, 44],
          [38, 15, 5, 42],
        ],
      },
    ],
  });

  var yMyChart = echarts.init(document.getElementById("ymain"));
  yMyChart.setOption({
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          {value: 1048, name: "Search Engine"},
          {value: 735, name: "Direct"},
          {value: 580, name: "Email"},
          {value: 484, name: "Union Ads"},
          {value: 300, name: "Video Ads"},
        ],
      },
    ],
  });
});

const changeValue = (e) => {
  //   console.log("e 的值" + e);

  // 修改父组件的值
  emit("update:modelValue", e);
};

const emitParentFun = () => {
  emit("childClick", input.value);
};
</script>

<style scope>
.text-red {
  color: red;
}

.cus-margin{
  margin: 10px 0;  
}
</style>
